<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
</head>
<body>
<!--
    1/模板的理解：
        动态的html页面   包含了一些js语法代码。
            双大括号表达式
            指令(以v-开头的自定义标签属性)
    2/双大括号表达式
        语法：{{exp}}或{{{exp}}}三个大括号已经被弃用
        功能: 向页面输出数据
        可以调用对象的方法
    3/指令一：强制属性绑定
        功能:指定变化的属性值
        完整写法：   v-bind:xxx='yyy' //yyy会作为表达式解析执行
        简介写法;   :xxx='yyy'
    4/指令二:绑定事件监听
        功能:绑定指定事件名的回调函数
        完整写法： v-on:click='xxx'
        简介写法：@click='xxx'
-->
<div id="app">
    <h2>1.双括号表达式</h2>
    <p>{{msg}}</p>       <!--textContent-->
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p>       <!--textContent-->
    <p v-html="msg"></p>       <!--innerHTML-->
    <h2>2.指令一：强制数据绑定</h2>
    <img v-bind:src="imageUrl" alt="">
    <img :src="imageUrl" alt="">
    <h2>3.指令二：绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <button @click="test2(msg)">test2</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            msg: '<a href="baidu.com">\'I Will Back !\'</a>',
            imageUrl:"https://cn.vuejs.org/images/logo.png"
        },
        methods:{
            test(){
                alert('你好世界')
            },
            test2(content){
                alert(content)
            }
        }
    })
</script>
</body>
</html>